<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>webAR中草药扫描</title>
  <script src="https://aframe.io/releases/1.4.1/aframe.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/16/Stats.min.js"></script>
  <script src="../../src/image-target/aframe.js" type="module"></script>
  <style>
    body {
      margin: 0;
      background-color: pink;
    }

    .example-container {
      overflow: hidden;
      position: absolute;
      width: 100%;
      height: 100%;
    }

    #caoyao-display {
      font-size: 24px;
      font-family: 'Arial', sans-serif;
      color: #333;
      text-shadow: 1px 1px 2px #aaa;
    }

    #caoyao-display-container {
      position: fixed;
      bottom: 0;
      width: 100%;
      display: none;
      /* 初始状态为隐藏 */
      background: rgba(0, 0, 0, 0.8);
      /* 半透明背景 */
      color: white;
      text-align: center;
      font-family: 'kaiti', sans-serif;
      padding: 10px;
      box-sizing: border-box;
      z-index: 9999;
      font-size: 30px;
      text-align: center;
      line-height: 50px;
    }

    #caoyao-display {
      font-size: 1.5em;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .caoyao-info-container {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      /* 间距 */
    }

    .caoyao-info {
      flex: 1;
      max-width: 30%;
      /* 确保每个 div 占据合适的宽度 */
      padding: 10px;
      box-sizing: border-box;
      aspect-ratio: 1;
      /* 确保是正方形 */
      border: 2px solid #00f9ff;
      border-radius: 10px;
      box-shadow: 0 0 10px #00f9ff;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1em;
      display: inline-block;
    }

    @media (max-width: 768px) {
      .caoyao-info {
        font-size: 0.8em;
      }

      #caoyao-display {
        font-size: 1.2em;
      }

      .caoyao-info-container {
        flex-direction: row;
        justify-content: space-around;
      }

      .caoyao-info {
        max-width: 30%;
      }
    }

    /* 新增的半透明div的样式 */
    .info-overlay {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80%;
      max-width: 600px;
      padding: 20px;
      background: rgba(0, 0, 0, 0.8);
      color: white;
      text-align: center;
      font-family: Arial, sans-serif;
      border-radius: 10px;
      box-shadow: 0 0 10px #00f9ff;
      z-index: 1000;
    }

    .info-overlay-close {
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
      font-size: 1.5em;
    }
  </style>

  <script>
    document.addEventListener("DOMContentLoaded", () => {
      // const startButton = document.querySelector("#start-button");
      // const sceneEl = document.querySelector('a-scene');
      // const arSystem = sceneEl.systems["mindar-image-system"];
      // startButton.addEventListener('click', () => {
      //   arSystem.start();
      //   startButton.style.display = 'none';
      // });

      let isOverlayOpen = false; // 标志位

      // 显示模型信息的函数
      const showInfoOverlay = (content) => {
        if (isOverlayOpen) return; // 如果已经打开，则忽略后续点击

        isOverlayOpen = true; // 设置标志位为true
        const overlay = document.createElement('div');
        overlay.className = 'info-overlay';
        overlay.innerHTML = `
          <div class="info-overlay-close">&times;</div>
          <p>${content}</p>
        `;
        document.body.appendChild(overlay);

        overlay.querySelector('.info-overlay-close').addEventListener('click', () => {
          document.body.removeChild(overlay);
          isOverlayOpen = false; // 关闭时重置标志位
        });
      };

      // 监听点击事件
      // 第一个接口
      document.querySelector('#caoyao-effect').addEventListener('click', () => {
        const content = '';  //定义了一个变量来存储药效
        const url = `http://127.0.0.1:8000/a/白芨/efficacy/?content=${encodeURIComponent(content)}`;
        fetch(url)
          .then(response => response.json()) // 修改这里，使用json()方法解析响应数据
          .then(data => {
            console.log(data);
            showInfoOverlay(data.efficacy); // 假设efficacy字段包含了草药的功效信息
          })
          .catch(error => {
            console.error('Error fetching data:', error);
            showInfoOverlay('获取数据失败，请稍后重试。');
          });
      });
      // 第二个功能接口
      document.querySelector('#caoyao-details').addEventListener('click', () => {
        const content = '';  
        const url = `http://127.0.0.1:8000/a/白芨/ecology/?content=${encodeURIComponent(content)}`;
        fetch(url)
          .then(response => response.json()) 
          .then(data => {
            console.log(data);
            showInfoOverlay(data.ecology); 
          })
          .catch(error => {
            console.error('Error fetching data:', error);
            showInfoOverlay('获取数据失败，请稍后重试。');
          });
      });
      // 第三个功能接口
      document.querySelector('#caoyao-showcase').addEventListener('click', () => {
        const content = '';  
        const url = `http://127.0.0.1:8000/a/白芨/morphology/?content=${encodeURIComponent(content)}`;
        fetch(url)
          .then(response => response.json()) 
          .then(data => {
            console.log(data);
            showInfoOverlay(data.morphology); 
          })
          .catch(error => {
            console.error('Error fetching data:', error);
            showInfoOverlay('获取数据失败，请稍后重试。');
          });
      });


    });
  </script>
</head>

<body>
  <div id="caoyao-display"
    style="position: fixed; top: 10px; width: 100%; text-align: center; font-size: 24px; font-family: Arial, sans-serif; color: #333;">
  </div>

  <div id="caoyao-display-container">
    <div id="caoyao-display"></div>
    <div id="caoyao-effect" class="caoyao-info">草药功效</div>
    <div id="caoyao-details" class="caoyao-info">生态习性</div>
    <div id="caoyao-showcase" class="caoyao-info">形态特征</div>
  </div>

  <div class="example-container">
    <a-scene
      mindar-image="imageTargetSrc: ./assets/zcy_info/zhongcaoyao.mind; showStats: false; autoStart: true; maxTrack: 3"
      embedded color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false"
      device-orientation-permission-ui="enabled: false">
      <a-assets>
        <a-asset-item id="baiji" src="./assets/zcy_info/model/baiji.glb"></a-asset-item>
        <a-asset-item id="duzhong" src="./assets/zcy_info/model/duzhong.glb"></a-asset-item>
        <a-asset-item id="huangjing" src="./assets/zcy_info/model/huangjing.glb"></a-asset-item>
      </a-assets>

      <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
      <a-entity mindar-image-target="targetIndex: 0">
        <a-gltf-model rotation="0 0 0" position="0 0 0" scale="0.25 0.25 0.25" src="#baiji"
          animation-mixer></a-gltf-model>
      </a-entity>
      <a-entity mindar-image-target="targetIndex: 1">
        <a-gltf-model rotation="0 0 0" position="0 0 0" scale="1.5 1.5 1.5" src="#duzhong"
          animation-mixer></a-gltf-model>
      </a-entity>
      <a-entity mindar-image-target="targetIndex: 2">
        <a-gltf-model rotation="0 0 0" position="0 0 0" scale="0.75 0.75 0.75" src="#huangjing"
          animation-mixer></a-gltf-model>
      </a-entity>
    </a-scene>
  </div>
</body>

</html>